<template>
  <div>
    <el-form>
      <el-form-item label="选择院区">
        <el-select v-model="value" filterable placeholder="请选择">
          <el-option
            v-for="item in hospitel_list"
            :key="item._id"
            :label="item.name"
            :value="item._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <div style="clear:both">
        <el-button style="float:left;margin-right:10px" size="small" @click="downloadTable">下载导入表</el-button>
        <el-upload
          :auto-upload="false"
          :on-change="handleFile"
          :before-remove="beforeRemove"
          :on-exceed="handleExceed"
          :limit="1"
          action
        >
          <el-button size="small" type="primary">选择导入表</el-button>
        </el-upload>
      </div>
      <el-table v-loading="loading" :data="table_data" max-height="420">
        <el-table-column :key="key" :prop="key" :label="key" v-for="key in all_fields" width="150"></el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
import XLSX from "xlsx";

export default {
  data() {
    return {
      loading: false,
      hospitel_list: [],
      value: "",
      all_fields: [
        "资产编码",
        "设备名称",
        "设备型号",
        "出厂编号",
        "注册证号",
        "使用科室",
        "存放地点",
        "生产厂商",
        "品牌",
        "68码",
        "是否计量",
        "风险等级",
        "折旧年限(年)",
        "供应商",
        "财务编码",
        "合同编码",
        "规格",
        "单位",
        "资产状态",
        "使用状态",
        "科室编号",
        "设备原值",
        "设备残值",
        "设备净值",
        "启用日期",
        "出厂日期",
        "产地",
        "保修期限(月)",
        "供应商联系人",
        "供应商电话",
        "售后工程师",
        "售后电话",
        "新折旧年限",
        "核算折旧年限",
        "核算折旧开始时间",
        "安装日期",
        "验收日期",
        "入库日期",
        "出库日期",
        "财务分类",
        "辅助分类",
        "68分类",
        "设备用途",
        "设备来源",
        "发票号",
        "采购人",
        "负责人",
        "经费来源",
        "财政拨款",
        "自筹金额",
        "送修情况",
        "成本核算",
        "是否进口",
        "账外",
        "低值",
        "计量编码",
        "备注",
        "院区"
      ],
      table_data: [],
      file_name: null
    };
  },
  watch: {
    hospitel_list: function() {
      this.value = this.hospitel_list[0]._id;
    }
  },
  created() {
    this.fetch_data();
  },
  methods: {
    fetch_data() {
      this.$http.get("hospitels").then(value => {
        this.hospitel_list = value.data;
      });
    },
    handleFile(e) {
      this.loading = true;
      this.file_name = e.name;
      let f = e.raw;
      let reader = new FileReader();
      reader.onload = e => {
        let data = new Uint8Array(e.target.result);
        let workbook = XLSX.read(data, { type: "array" });
        let worksheet = workbook.Sheets[workbook.SheetNames[0]];
        let table_json = XLSX.utils.sheet_to_json(worksheet);
        this.$http
          .post("devs/fetch", { table_json, hospitel_id: this.value })
          .then(value => {
            this.table_data = value.data;
            this.$message.success("获取数据成功");
            this.loading = false;
          })
          .catch(() => {
            this.$message.error("获取数据失败");
            this.loading = false;
          });
      };
      reader.readAsArrayBuffer(f);
    },
    downloadTable() {
      if (this.file_name) {
        this.table_data.forEach(t_item => {
          this.all_fields.forEach(a_item => {
            if (!t_item[a_item]) {
              t_item[a_item] = "";
            }
          });
        });
        let worksheet = XLSX.utils.json_to_sheet(this.table_data);
        var new_workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(new_workbook, worksheet, "Worksheet");
        XLSX.writeFile(new_workbook, this.file_name);
      } else {
        this.$message.warning("请选择导入表");
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，不可选择 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>